<!-- 
@todo 好像不是这么一回事。
身份类型： 
身份类型的可靠值有省代理，市代理，分公司，联合创始人。
如果是省代理，
-->
<template>
	<view class="wc-box">
		<view class="sf-label"  @click="open">
			<slot>激活</slot>
		</view>
		<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
		<u-popup v-model="show1" mode="center" width="500rpx" height="600px">
				<view>
					
				</view>
			</u-popup>
		<u-popup v-model="show2" mode="center" border-radius="20" @maskClick="maskClick">
			<view class="activation-1">
				<view class="activation-header">
					激活创客会员
				</view>
				<view class="activation-body">
					<view class="display-flex iosx">
						<view class="yzmiosx">激活码:</view>
						<input  class="inputis" v-model="users_code"  placeholder="激活码" />
					</view>
					
					<view class="display-flex col-center iosx" style="margin-top: 30rpx;">
						<view class="yzmiosx">验证码:</view>
						<input  class="inputis" v-model="code"  placeholder="省市代/分公司/联合创始人的验证码"/>
						<view class="huoqyzm" @click="getCode">{{ codeTips }}</view>
					</view>
					
				</view>
				<view class="activation-footer">
					<button @click="activeUsersCode" class="butqd">确定</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import request from "@/utils/request";
	import {
		apiUserCentre,
	} from '@/api/user'
	export default {
		props: {},
		data(){
			return {
				show1: false,
				show2: false,
				codeTips: '',
				code: '',
				users_code: ''
			}
		},
		methods: {
			open(){
				this.show2 = true
			},
			maskClick(){
				console.log(e);
			},
			codeChange(text){
				this.codeTips = text;
			},
			/**
			 * 获取验证码的接口，这里是直接从 芒播那里抠过来的。
			 * @todo 接口地址可能有变，需要联调
			 */
			getCode(){
				if (this.$refs.uCode.canGetCode) {
					if(this.users_code == '') {
						this.$u.toast('请输入您申请的激活码');
						return;
					}
					// 向后端请求验证码
					request.get('distribution_user_codes/sendActiveUserSmsCode', {
						params : {
							user_code: this.users_code
						}
					}).then(res => {
						this.$u.toast('验证码已发送');
						this.$refs.uCode.start();
					})
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			/**
			 * 获取验证码后的提交操作。
			 * @todo 这段代码 是从 芒播里抠过来的，还需要联调
			 */
			activeUsersCode() {
				if(this.users_code == '') {
					this.$u.toast('请输入激活码');
					return;
				}
				
				if(this.code == '') {
					this.$u.toast('请输入省市代/分公司/联合创始人给您的验证码');
					return;
				}
				
				// 向后端请求验证码
				request.post('distribution_user_codes/activeUser', {
					user_code: this.users_code,
					sms_code: this.code
				}).then(res => {
					apiUserCentre()
					this.users_code = this.code = '';
					this.$u.toast('激活成功');
					this.show2 = false;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.wc-box {
	display: inline-block;
	font-size: 0;

}
.sf-label {
	display: inline-block;
	padding: 2rpx 10rpx;
	min-width: 90rpx;
	line-height: 30rpx;
	font-size: 22rpx;
	border-radius: 6rpx;
	text-align: center;
	color: #ffffff;
	background-color: #3c9cff;
}
//@todo 以下代码需要整理
.display-flex {
	display: flex;
}
.activation-1{
	box-sizing: border-box;
	width: 680rpx;
	background-color: #FFF;
	padding-top: 62rpx;
	padding-left: 30rpx;
	padding-right: 30rpx;
	.activation-header{
		font-weight: bold;
		font-size: 36rpx;
		color: #FF7718;
		margin-bottom: 79rpx;
	}
	.activation-body{
		
		height: 186rpx;
	
		.iosx{
			width: 100%;
			border-bottom: 1rpx solid #CCCCCC;
			position: relative;
			
			.yzmiosx{
				line-height: 62rpx;
				margin-right: 10rpx;
				font-weight: 500;
				font-size: 23rpx;
				color: #000000;
			}
			.inputis{
				width: 350rpx;
				height: 62rpx;
				font-weight: 400;
				font-size: 23rpx;
				color: #999999;
			}
			.huoqyzm{
				// position: absolute;
				top: 10rpx;
				padding-left: 18rpx;
				line-height: 32rpx;
				font-size: 26rpx;
				right: 20rpx;
				width: 180rpx;
				height: 32rpx;
				border-left: 1rpx solid #CCCCCC;
				color: #F76E00;
			}
		}
		
		
	}
	.activation-footer {
		display: flex;
		flex-direction: row;
		justify-content: center;
		padding: 40rpx 0;
		.butqd{
			width: 163rpx;
			height: 62rpx;
			line-height: 62rpx;
			text-align: center;
			background-image: linear-gradient(to right, #ff8200 , #dc9f2e,#babb5c,#97d88a);
			color: #fff;
			border-radius: 31rpx;
			
		}
	}
}
</style>

<style lang="scss">
	.uni-input-input, 
	.uni-input-input::input-placeholder{
		color: #ccc;
	}
</style>